<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>qq音乐</title>
  <!-- 引入css样式 -->
  <link rel="stylesheet" href="./css/min_index.css">
  <!-- <link rel="stylesheet" href="./css/index.css"> -->
  <!-- 引入字体图标 -->
  <link rel="stylesheet" href="./Font/min_index.iconfont/iconfont.css">
  <link rel="shortcut icon" href="./upload/favicon.ico" type="image/x-icon">


</head>

<body>
  <!-- 新歌首发 -->
  <div class="min_app   width">
    <!-- 头部 -->
    <header>
      <div class="width">
        <!-- logo -->
        <h1 class="logo">
          <a href="./index.html">
            <img class="qqMusic_logo" src="./images/logo.png" alt="">
          </a>
        </h1>
        <!-- 音乐馆导航栏 -->
        <ul class="header_top_nav">
          <li class="top_nav_item">
            <a class=" top_nav_link  bgGreen" href="./index.html" data-id="0">音乐馆</a>
          </li>
          <li class="top_nav_item">
            <a class="top_nav_link" href="#" data-id="1">我的音乐</a>
          </li>
          <li class="top_nav_item">
            <a class="top_nav_link" href="./chanpin.html">客户端</a>
            <img class="vip_tq" src="./images/vip_tq.png" alt="">
          </li>
          <li class="top_nav_item">
            <a class="top_nav_link" href="#">开放平台</a>
          </li>
          <li class="top_nav_item">
            <a class="top_nav_link" href="./vip-index.html" target="_blank">VIP</a>
          </li>
        </ul>
        <!-- 搜索框 -->
        <div class="header_top_search">
          <div class="search_input">
            <input class="search_input_input" placeholder="搜索音乐、MV、歌单、用户" type="text">
            <button class="search_input_btn">
              <i class="icon_search sprite iconfont icon-sousuo"></i>
            </button>
          </div>
          <!-- 表单下列的下拉框 -->
          <div class="search_input_other">
            <dl class="search_input_other_list">
              <dt>
                <span>历史记录</span>
                <span class="iconfont icon-shanchu " id="shanchu"></span>
              </dt>
              <dd class="dd_item">

              </dd>
            </dl>

          </div>
        </div>
        <!-- 点击搜索后会将记录保存在历史记录中 -->
        <script>

        </script>


        <!-- 登录开通vip模块 -->
        <div class="header__opt">
          <div class="header_top_login">
            <span class="login_btn"><a href="#" class="top_login__link "><span class="span_login">登录</span></a></span>
            <!-- <a href="#" class="userImg top_login__link">
                      <img src="./images/smqq.png" class="smqq" alt="">
                  </a> -->
            <div class="mod_select mod_select_op">
              <a class="select__choose select__choose_vip bgGreen" href="#">开通VIP</a>
              <div class="ffb">
                <a class="select__choose white" href="#">开通绿钻豪华版</a>
                <a class="select__choose white" href="#">开通付费包</a>
              </div>
            </div>

            <!-- 充值模块 -->
            <div class="mod_select mod_select_cz">
              <a class="select__choose_vip chongzhi select__choose" href="#">充值</a>
              <!-- 购买乐币 -->
              <div class="sell">
                <a class="select__choose" href="#">购买乐币</a>
                <a class="select__choose" href="#">充值饭票</a>
              </div>
            </div>
          </div>
          <!-- 用户详情 -->
          <div class="userMore">
            <!-- 用户头像 -->
            <div class="userDetail">
              <div class="userDetail_img"> <img src="./images/smqq.png" alt=""></div>
              <div class="userDetail_title">叫爹</div><br>
              <div class="vip_box">
                <img class="d_vip1" src="./images/d-vip1.png" alt="">
                <img class="d_vip1" src="./images/d-vip1.png" alt="">
              </div>
              <!-- 豪华绿钻 -->
              <div class="userDetail_item">
                <div class="userDetail_item_title">
                  <h3>豪华绿钻版</h3>
                  <span>开通立即赠送付费音乐包</span>
                </div>
                <button class="kaitong">开通</button>
              </div>
              <div class="userDetail_item">
                <div class="userDetail_item_title">
                  <h3>付费音乐包</h3>
                  <span>畅享千万包月曲库</span>
                </div>
                <button class="kaitong">开通</button>
              </div>
              <div class="userDetail_t">评论通知</div>
              <div class="userDetail_t breakLogin">退出登录</div>
            </div>
          </div>
        </div>
      </div>
    </header>
    <!-- 主体内容 -->
    <div class="main">

      <div class="mod_data">

        <!-- 图片部分 -->
        <div class="data_cover">
          <div class="data_img">
            <img
              src="	https://qpic.y.qq.com/music_cover/gaSSCRswoq7NlpHA8vK1PufqxCnYC4jicicOhyb8fTop9xhedkDu7qVQ/600?n=1"
              alt="">
          </div>
        </div>
        <!-- 讲解 -->
        <div class="data_cont">
          <div class="data_name">
            <h1>《世界杯BGM，你来定》</h1>
          </div>
          <div class="data_singer">
            <i class="iconfont  icon-chazhaoyonghu  iconfont_singer"></i>
            <a href="#">歌单狂魔</a>
          </div>
          <div class="data_info_item">
            <ul class="data__info">
              <li>
                <span>标签:
                  <a href="#">运动</a>
                  <a href="#">宣泄</a>
                  <a href="#">流行</a>
                </span>
              </li>
              <li>播放量：56.6</li>
              <li>收藏量：1522</li>
            </ul>
          </div>
          <div class="data_actions">
            <a href="https://y.qq.com/n/ryqq/playlist/8561263052" class="active">
              <i class="iconfont icon-bofang"></i>
              <span>全部播放</span>
            </a>
            <a href="#">
              <i class="iconfont icon-aixin"></i>
              <span>收藏</span>
            </a>
            <a href="#">
              <i class="iconfont icon-31pinglun"></i>
              <span>评论(27)</span>
            </a>
            <a href="#">
              <i class="iconfont icon-gengduo"></i>
              <span>更多</span>
            </a>
          </div>
        </div>
      </div>
      <!-- 歌曲详情  细节 -->
      <div class="detail_layout">
        <!-- 左侧 -->
        <div class="detail_layout__main">
          <!-- 左侧歌单部分 -->
          <div class="mod_songlist ">
            <table>
              <tr class="table_tr" style="text-align: left;">
                <th></th>
                <th>歌手</th>
                <th>歌曲</th>
                <th>专辑</th>
                <th>时长</th>
              </tr>
              <!-- 歌曲数量 -->
              <div class="sing_num">
                <tr class="table_tr">
                  <td>1</td>
                  <td class="sing_op">
                    <a href="#" class="songlist__songname">决战斗室</a>
                    <div class="mod_list_menu">
                      <i class="bofang" data-id="0"></i>
                      <a href="./mucis/决战斗士.mp4" download="决战到天亮"> <i class="xiazai"></i></a>
                    </div>
                  </td>
                  <td><a href="#">潘玮柏</a></td>
                  <td><a href="#">高手</a></td>
                  <td>03:45</td>
                </tr>
              </div>
              <div class="sing_num">
                <tr class="table_tr">
                  <td>2</td>
                  <td class="sing_op">
                    <a href="#" class="songlist__songname">天台月光 </a>
                    <div class="mod_list_menu">
                      <i class="bofang" data-id="1"></i>
                      <a href="./mucis/天台的月光.mp4" download="天台月光"> <i class="xiazai"></i></a>
                    </div>
                  </td>
                  <td><a href="#">周杰伦</a></td>
                  <td><a href="#">天台</a></td>
                  <td>05:45</td>
                </tr>
              </div>
              <div class="sing_num">
                <tr class="table_tr">
                  <td>3</td>
                  <td class="sing_op">
                    <a href="#" class="songlist__songname">海阔天空</a>
                    <div class="mod_list_menu">
                      <i class="bofang" data-id="2"></i>
                      <a href="./mucis/海阔天空.mp4" download="海阔太空"> <i class="xiazai"></i></a>
                    </div>
                  </td>
                  <td><a href="#">张学友</a></td>
                  <td><a href="#">海阔天空</a></td>
                  <td>06:46</td>
                </tr>
              </div>

              <div class="sing_num">
                <tr class="table_tr">
                  <td>4</td>
                  <td class="sing_op">
                    <a href="#" class="songlist__songname">预谋</a>
                    <div class="mod_list_menu">
                      <i class="bofang" data-id="3"></i>
                      <a href="./mucis/预谋.mp4" download="预谋"> <i class="xiazai"></i></a>
                    </div>
                  </td>
                  <td><a href="#">陈惠妹</a></td>
                  <td><a href="#">预谋</a></td>
                  <td>02:46</td>
                </tr>
              </div>

              <div class="sing_num">
                <tr class="table_tr">
                  <td>5</td>
                  <td class="sing_op">
                    <a href="#" class="songlist__songname">甜蜜蜜</a>
                    <div class="mod_list_menu">
                      <i class="bofang" data-id="4"></i>
                      <a href="./mucis/决战斗士.mp4" download="决战到天亮"> <i class="xiazai"></i></a>
                    </div>
                  </td>
                  <td><a href="#">徐良</a></td>
                  <td><a href="#">甜蜜蜜</a></td>
                  <td>01:30</td>
                </tr>
              </div>

              <div class="sing_num">
                <tr class="table_tr">
                  <td>6</td>
                  <td class="sing_op">
                    <a href="#" class="songlist__songname">小三</a>
                    <div class="mod_list_menu">
                      <i class="bofang" data-id="5"></i>
                      <a href="./mucis/决战斗士.mp4" download="决战到天亮"> <i class="xiazai"></i></a>
                    </div>
                  </td>
                  <td><a href="#">陈学友</a></td>
                  <td><a href="#">小三</a></td>
                  <td>02:34</td>
                </tr>
              </div>

              <div class="sing_num">
                <tr class="table_tr">
                  <td>7</td>
                  <td class="sing_op">
                    <a href="#" class="songlist__songname">偏爱</a>
                    <div class="mod_list_menu">
                      <i class="bofang" data-id="6"></i>
                      <a href="./mucis/决战斗士.mp4" download="决战到天亮"> <i class="xiazai"></i></a>
                    </div>
                  </td>
                  <td><a href="#"></a>小芳</td>
                  <td><a href="#">偏爱</a></td>
                  <td>02:34</td>
                </tr>
              </div>

              <div class="sing_num">
                <tr class="table_tr">
                  <td>8</td>
                  <td class="sing_op">
                    <a href="#" class="songlist__songname">别样生活</a>
                    <div class="mod_list_menu">
                      <i class="bofang" data-id="7"></i>
                      <a href="./mucis/决战斗士.mp4" download="决战到天亮"> <i class="xiazai"></i></a>
                    </div>
                  </td>
                  <td><a href="#">雷芳</a></td>
                  <td><a href="#">别样生活</a></td>
                  <td>02:34</td>
                </tr>
              </div>

              <div class="sing_num">
                <tr class="table_tr">
                  <td>9</td>
                  <td class="sing_op">
                    <a href="#" class="songlist__songname">冬季校园</a>
                    <div class="mod_list_menu">
                      <i class="bofang" data-id="8"></i>
                      <a href="./mucis/决战斗士.mp4" download="决战到天亮"> <i class="xiazai"></i></a>
                    </div>
                  </td>
                  <td><a href="#">李晓东</a></td>
                  <td><a href="#">冬季校园</a></td>
                  <td>02:04</td>
                </tr>
              </div>

              <div class="sing_num">
                <tr class="table_tr">
                  <td>10</td>
                  <td class="sing_op">
                    <a href="#" class="songlist__songname">得不到的人</a>
                    <div class="mod_list_menu">
                      <i class="bofang" data-id="9"></i>
                      <a href="./mucis/决战斗士.mp4" download="决战到天亮"> <i class="xiazai"></i></a>
                    </div>
                  </td>
                  <td><a href="#">于洋</a></td>
                  <td><a href="#">得不到的人</a></td>
                  <td>02:10</td>
                </tr>
              </div>
            </table>
          </div>




          <!-- 立即下载模块 -->
          <div class="page_box">
            <p class="client_guide__txt">查看更多内容，请下载客户端</p>
            <a href="#" class="client_guide__btn">立即下载</a>
          </div>
          <!-- 评论模块 -->
          <div class="mod_comment">
            <div class="part__hd">
              <h2 class="part__tit">评论<span class="c_tx_thin ">共28条评论</span></h2>
            </div>
            <div class="comment__input">
              <div class=" comment__textarea">
                <div class="comment__textarea_inner ">

                </div>
                <div class="comment__tips ">剩余<span>300</span>字数</div>
              </div>
              <!-- 笑脸  评论 -->
              <a href="#" class="comment__face">
                <i class=" iconfont icon-xiaolian "></i>
              </a>
              <div class="comment__tool">
                <a href="#" class="mod_btn_green">发布评论</a>
              </div>
            </div>
            <!-- 精彩评论 -->
            <div class="mod_hot_comment">
              <div class="comment_type__title ">
                <h2>精彩评论</h2>
              </div>
              <ul class="comment__list">
                <li class="comment__list_item ">
                  <div>
                    <!-- 头像部分 -->
                    <a href="#" class="comment__avatar">
                      <img
                        src="https://thirdqq.qlogo.cn/g?b=sdk&k=GA59VIC0cwTKokrVtENLGw&kti=Y4OGpwAAAAE&s=140&t=166956300"
                        alt="乖乖">
                    </a>
                    <h4 class="comment__title">
                      <a href="#" class="c_tx_thin">甜甜小宝贝</a>
                      <span class="vip_icon"><img src="https://y.qq.com/mediastyle/lv-icon/v10/vip/1x/svip5.png?max_age=2592000
                        " alt=""></span>
                    </h4>
                    <div class="comment__date">
                      11月23日 19:08
                      &nbsp;&nbsp;
                      来自四川
                    </div>
                    <p class="comment__text">
                      <span>我投给了《Dreamers》这个选项</span>
                    </p>
                    <div class="comment__opt">
                      <a href="#">
                        <i class="iconfont icon-jurassic_zan
                        ">13</i>
                      </a>
                      <a href="#" class="comment__feedback ">回复</a>
                    </div>
                  </div>
                </li>
              </ul>

              <ul class="comment__list">
                <li class="comment__list_item ">
                  <div>
                    <!-- 头像部分 -->
                    <a href="#" class="comment__avatar">
                      <img src="	https://thirdqq.qlogo.cn/g?b=sdk&k=uVZ7MXKEjeNjxqHS0Ih9Lw&s=140&t=1604983555" alt="乖乖">
                    </a>
                    <h4 class="comment__title">
                      <a href="#" class="c_tx_thin">小混蛋</a>
                      <span class="vip_icon"><img src="https://y.qq.com/mediastyle/lv-icon/v10/vip/1x/svip5.png?max_age=2592000
                        " alt=""></span>
                    </h4>
                    <div class="comment__date">
                      11月25日 20:08
                      &nbsp;&nbsp;
                      来自陕西
                    </div>
                    <p class="comment__text">
                      <span>《天台爱情》哈哈哈哈哈哈哈哈哈</span>
                    </p>
                    <div class="comment__opt">
                      <a href="#">
                        <i class="iconfont icon-jurassic_zan
                        ">13</i>
                      </a>
                      <a href="#" class="comment__feedback ">回复</a>
                    </div>
                  </div>
                </li>
              </ul>

            </div>
            <!-- 全部评论 -->
            <div class="mod_hot_comment">
              <div class="comment_type__title ">
                <h2>全部评论(23)</h2>
              </div>
              <ul class="comment__list">
                <li class="comment__list_item ">
                  <div>
                    <!-- 头像部分 -->
                    <a href="#" class="comment__avatar">
                      <img
                        src="	https://thirdqq.qlogo.cn/g?b=sdk&k=CRQiaqMG6Qjd3XdhCKOjEuQ&kti=Y4j87AAAAAA&s=140&t=1669463242"
                        alt="乖乖">
                    </a>
                    <h4 class="comment__title">
                      <a href="#" class="c_tx_thin">叶子</a>
                      <span class="vip_icon"><img src="https://y.qq.com/mediastyle/lv-icon/v10/vip/1x/svip5.png?max_age=2592000
                        " alt=""></span>
                    </h4>
                    <div class="comment__date">
                      11月23日 19:08
                      &nbsp;&nbsp;
                      来自西藏
                    </div>
                    <p class="comment__text">
                      <span>《By My Side REDDJ》内马尔bgm😆</span>
                    </p>
                    <div class="comment__opt">
                      <a href="#">
                        <i class="iconfont icon-jurassic_zan
                        ">15</i>
                      </a>
                      <a href="#" class="comment__feedback ">回复</a>
                    </div>
                  </div>
                </li>
              </ul>

              <ul class="comment__list">
                <li class="comment__list_item ">
                  <div>
                    <!-- 头像部分 -->
                    <a href="#" class="comment__avatar">
                      <img src="	https://thirdqq.qlogo.cn/g?b=sdk&k=uVZ7MXKEjeNjxqHS0Ih9Lw&s=140&t=1604983555" alt="乖乖">
                    </a>
                    <h4 class="comment__title">
                      <a href="#" class="c_tx_thin">小混蛋</a>
                      <span class="vip_icon"><img src="https://y.qq.com/mediastyle/lv-icon/v10/vip/1x/svip5.png?max_age=2592000
                        " alt=""></span>
                    </h4>
                    <div class="comment__date">
                      11月25日 20:08
                      &nbsp;&nbsp;
                      来自陕西
                    </div>
                    <p class="comment__text">
                      <span>《天台爱情》哈哈哈哈哈哈哈哈哈</span>
                    </p>
                    <div class="comment__opt">
                      <a href="#">
                        <i class="iconfont icon-jurassic_zan
                        ">13</i>
                      </a>
                      <a href="#" class="comment__feedback ">回复</a>
                    </div>
                  </div>
                </li>
              </ul>

            </div>
          </div>
        </div>
        <audio src="./mucis/决战斗士.mp4" class="juezhan"></audio>
        <audio src="./mucis/天台的月光.mp4" class="tiantai"></audio>
        <audio src="./mucis/海阔天空.mp4" class="haikuo"></audio>
        <audio src="./mucis/预谋.mp4" class="yumou"></audio>

        <!-- 右侧简介 -->
        <div class="detail_layout__other">
          <div class="mod_about">
            <h3>简介</h3>
          </div>
          <div class="about__cont">
            <p>第一次做互动歌单，大家轻虐，把自己喜欢的、想要看世界杯时听的BGM投稿到这里，让我看看谁的BGM最sao</p>
            <a href="#">[更多]</a>
          </div>
        </div>
      </div>
    </div>

    <!-- 固定按钮 -->
    <div class="fixed_btn">
      <a href="#" class="btn_text">
        <i class="iconfont  icon-xiangshangfanye"></i>

      </a>
      <a href="#">举报</a>
      <a href="#">反馈</a>
      <a href="#" class="btn_text">
        <i class="iconfont  icon-24gf-playSquare"></i>
      </a>
    </div>
  </div>
  <script src="./js/min_index.js"></script>
</body>

</html>